// 单设备告警记录与故障记录
import React, { Component } from 'react';
import { connect } from 'dva';
import { Radio, Button, message, Modal, Steps } from 'antd';
import moment from 'moment';
import Table from '../../components/displayTable';
import Pc from '../../components/permissionControl';
import { api, listForDevice as alarmQuery, changeToWorkOrder } from '../../services/alarm';
import { isSuccess } from '../../configs/error';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Step = Steps.Step;

const sty = {
	hide: {
		display: 'none'
	},
	group: {
		marginBottom: '1em'
	},
	span: {
		color: '#108ee9',
    cursor: 'pointer'
	},
	right: { float: 'right' }
};

const alarmColumns = [
	{
		title: '报警名称',
		dataIndex: 'deviceAlarmName',
		key: 'deviceAlarmName'
	},
	{
		title: '报警上报时间',
		dataIndex: 'happenTime',
		render: text => text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '',
		key: 'happenTime'
	},
	{
		title: '报警状态',
		dataIndex: 'deviceAlarmStatus',
		key: 'deviceAlarmStatus'
	},
	{
		title: '处理完成时间',
		dataIndex: 'fixTime',
		key: 'fixTime',
		render: text => text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '--',
	}
];

const faultColumns = [
	{
		title: '故障名称',
		dataIndex: 'deviceAlarmName',
		key: 'deviceAlarmName'
	},
	{
		title: '故障上报时间',
		dataIndex: 'happenTime',
		render: text => text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '',
		key: 'happenTime'
	},
	{
		title: '故障状态',
		dataIndex: 'deviceAlarmStatus',
		key: 'deviceAlarmStatus'
	},
	{
		title: '工单号',
		dataIndex: 'workOrderId',
		key: 'workOrderId'
	},
	{
		title: '处理完成时间',
		dataIndex: 'fixTime',
		key: 'fixTime',
		render: text => text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '--',
	}
];

@connect(() => ({ }))
class AlarmList extends Component {
	constructor(props, context) {
		super(props, context);
		const { tab } = props;
		this.state = {
			tab: tab || '1',
			selectedKeys: [],
			faultQueryData: { type: 1, reloadKey: Math.random() },
			alarmQueryData: { type: 2 },
			detail: null
		};
		this.faultColumns = faultColumns.concat({
			title: '操作',
			key: '操作',
			render: (text, record) => <span style={sty.span} onClick={() => this.showDetail(record.id)}>详情</span>
		});
	}

	showDetail(id) {
		const detail = this.faults.find(f => f.id === id);
		this.setState({ detail });
	}

	onChange = e => this.setState({ tab: e.target.value });

	onQuery = data => {
		const { deviceSno } = this.props;
		const queryData = {
			deviceSno,
			currentPage: data.current,
			pageSize: data.size
		};
		delete data.size;
		delete data.current;
		return alarmQuery({ ...data, ...queryData });
	}

	selectedRowKeys = (key) => {
		this.setState({ selectedKeys: key });
	}

	changeToWorkOrder = async () => {
		const { selectedKeys } = this.state;
		if (!selectedKeys.length) {
			message.warn('请先选择故障项!');
			return;
		}
		const res = await changeToWorkOrder({ deviceAlarmIds: selectedKeys });
		if (isSuccess(res)) {
			message.success('转为工单成功!');
			this.reload();
		}
	}

	faultChange = ({ records }) => {
		this.faults = records;
	}

	reload() {
		const { faultQueryData } = this.state;
		this.setState({
			faultQueryData: { ...faultQueryData, reloadKey: Math.random() }
		});
	}

	renderStep(detail) {
		if (!detail) return null;
		return (
			<Steps direction="vertical" size="small" current={detail.fixTime ? 2 : detail.workOrderCtime ? 1 : 0}>
				<Step title={`故障上报 ${detail.happenTime}`} description={<span>类型：<span style={{ color: 'red' }}>{detail.deviceAlarmName}</span></span>} />
				<Step title={`生成工单 ${detail.workOrderCtime || ''}`} description={<span>单号：<span style={sty.span}>{detail.workOrderId}</span></span>} />
				<Step title={`处理完成 ${detail.fixTime || ''}`} description={<span>单号：<span style={sty.span}>{detail.workOrderId}</span></span>} />
			</Steps>
		);
	}

	render() {
		const { deviceSno } = this.props;
		const { tab, selectedKeys, alarmQueryData, faultQueryData, detail } = this.state;
		const rowSelection = {
			onChange: this.selectedRowKeys,
			selectedRowKeys: selectedKeys
		};
		if (!deviceSno) return null;
		return (
			<div>
				<RadioGroup onChange={this.onChange} value={tab} style={sty.group}>
					<RadioButton value="1">故障记录</RadioButton>
					<RadioButton value="2">报警记录</RadioButton>
				</RadioGroup>
				<Pc url={api.changeToWorkOrder}>
					<Button
						onClick={this.changeToWorkOrder}
						style={tab === '2' ? { ...sty.right, ...sty.hide } : sty.right}
					>
							转为工单
					</Button>
				</Pc>
				<Table
					style={tab === '2' ? sty.hide : null}
					query={this.onQuery}
					columns={this.faultColumns}
					queryData={faultQueryData}
					rowSelection={rowSelection}
					rowKey="id"
					dataChange={this.faultChange}
				/>
				<Table
					style={tab === '1' ? sty.hide : null}
					query={this.onQuery}
					columns={alarmColumns}
					queryData={alarmQueryData}
				/>
				<Modal
					title="处理记录"
					visible={detail}
					onCancel={() => this.setState({ detail: null })}
					footer={null}
				>
					{this.renderStep(detail)}
				</Modal>
			</div>
		);
	}
}

export default AlarmList;
